<template>
	<article class="page page-online-tools">
		<h4 class="text-center">在线工具收集</h4>
		<form class="page-body">
			<div class="row">
				<div class="col-3 left">
					<fieldset>
						<legend>网站列表</legend>
						<div class="fieldset-content">
							<div class="form-group website-list">
								<div v-for="(v, i) in websiteList" :key="i"
									:class="['website-item', { active: i === websiteActiveIndex }]" @click="itemClick(v, i)">
									<i :class="v.icon"></i>
									{{ v.label }}
									<span class="badge bg-secondary">{{ v.tag }}</span>
								</div>
							</div>
						</div>
					</fieldset>
				</div>
				<div class="col-9 right">
					<fieldset>
						<legend>网页浏览</legend>
						<div class="fieldset-content">
							<iframe :src="iframeUrl"
								sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox"
								referrerpolicy="no-referrer" @load="loadingCount = 0"></iframe>
							<div v-show="iframeUrl" class="iframe-btn badge rounded-pill bg-danger" @click="openByBrowser">
								在浏览器中打开</div>
							<x-loading size="large" fix v-if="loadingCount > 0"></x-loading>
						</div>
					</fieldset>
				</div>
			</div>
		</form>
	</article>
</template>

<script>
const { shell } = global.require('electron')

export default {
	name: 'online-tools',
	data() {
		return {
			websiteList: [
				// IP
				{ icon: 'fa fa-search', label: 'IP地址查询', tag: 'IP', url: 'https://ip138.com/' },
				// DNS
				{ icon: 'fa fa-search', label: '全球DNS搜索引擎', tag: 'DNS', url: 'https://www.dnsdb.io/zh-cn/' },
				// CMS指纹识别
				{ icon: 'fa fa-search', label: '云悉', tag: 'CMS指纹识别', url: 'https://www.yunsee.cn/' },
				// 网络空间搜索引擎
				{ icon: 'fa fa-search', label: 'Shodan', tag: '网络空间搜索', url: 'https://www.shodan.io/' },
				{ icon: 'fa fa-search', label: 'Censys', tag: '网络空间搜索', url: 'https://search.censys.io/' },
				{ icon: 'fa fa-search', label: 'ZoomEye', tag: '网络空间搜索', url: 'https://www.zoomeye.org/' },
				{ icon: 'fa fa-search', label: 'FOFA', tag: '网络空间搜索', url: 'https://fofa.info/' },
				{ icon: 'fa fa-search', label: 'Punkspider', tag: '网络空间搜索', url: 'https://punkspider.org/' },
				{ icon: 'fa fa-search', label: 'IVRE(Drunk)', tag: '网络空间搜索', url: 'https://ivre.rocks/' },
				// 网络空间搜索引擎
				{ icon: 'fa fa-search', label: '聚查网', tag: '网站综合查询', url: 'http://www.jucha.com/' },
				{ icon: 'fa fa-search', label: '企查查', tag: '商业查询', url: 'https://www.qcc.com/' },
				{ icon: 'fa fa-search', label: '天眼查', tag: '商业查询', url: 'https://www.tianyancha.com/' },
				{ icon: 'fa fa-search', label: 'REG007', tag: '你注册过哪些网站', url: 'https://www.reg007.com/' },
				{ icon: 'fa fa-search', label: 'Alexa排名', tag: '网站综合查询', url: 'http://www.alexa.cn/' },
				{ icon: 'fa fa-search', label: '公安机关备案查询 ', tag: '公安备案', url: 'https://www.beian.gov.cn/portal/recordQuery' },
				{ icon: 'fa fa-search', label: 'ICP/IP/域名备案查询 ', tag: 'ICP', url: 'https://beian.miit.gov.cn/#/Integrated/recordQuery' },
				{ icon: 'fa fa-search', label: '网站ICP备案查询', tag: 'ICP', url: 'https://www.icpapi.com/' },
				{ icon: 'fa fa-search', label: '网站ICP备案查询', tag: 'ICP', url: 'http://www.chaicp.com/' },
				{ icon: 'fa fa-search', label: '爱查线索', tag: 'ICP', url: 'https://www.aichaicp.com/' },
				{ icon: 'fa fa-search', label: 'Whois信息查询', tag: 'Whois', url: 'https://whois.xinnet.com/' },
				// 加密解密
				{ icon: 'fa fa-unlock-alt', label: 'CMD5', tag: 'md5加密解密', url: 'https://www.cmd5.com/' },
				{ icon: 'fa fa-unlock-alt', label: 'SOMD5', tag: 'md5加密解密', url: 'https://www.somd5.com/' },
				{ icon: 'fa fa-unlock-alt', label: '查MD5', tag: 'md5加密解密', url: 'http://www.chamd5.org/' },
				{ icon: 'fa fa-unlock-alt', label: '维吉尼亚爆破', tag: '解密', url: 'https://quipqiup.com/' },
				{ icon: 'fa fa-unlock-alt', label: '密码泄露查询', tag: '密码泄露', url: 'https://haveibeenpwned.com/' },
				{ icon: 'fa fa-unlock-alt', label: 'Firefox Monitor', tag: '密码泄露', url: 'https://monitor.firefox.com/' },
				{ icon: 'fa fa-unlock-alt', label: '与佛论禅', tag: '加密解密', url: 'https://www.keyfc.net/bbs/tools/tudoucode.aspx' },
				{ icon: 'fa fa-unlock-alt', label: 'XSSEE', tag: '编码转换', url: 'https://web2hack.org/xssee/' },
				// {icon: 'fa fa-unlock-alt', label: 'XSSEE', tag: '编码转换', url: 'https://evilcos.me/lab/xssee/'},
				{icon: 'fa fa-unlock-alt', label: 'JS OB Tool', tag: 'OB混淆', url: 'https://obfuscator.io/'},
				{icon: 'fa fa-unlock-alt', label: 'de4js', tag: 'OB反混淆', url: 'https://lelinhtinh.github.io/de4js/'},
				{icon: 'fa fa-unlock-alt', label: 'JS beautifier', tag: 'JS反混淆', url: 'https://beautifier.io/'},
				// 工具箱
				{ icon: 'fa fa-file-pdf-o', label: 'PDF24 Tools', tag: 'PDF', url: 'https://tools.pdf24.org/zh/all-tools' },
				{ icon: 'fa fa-file-pdf-o', label: 'PDF Pie', tag: 'PDF编辑', url: 'https://pdfpie.com/' },
				{ icon: 'fa fa-file-picture-o', label: 'Remove.bg', tag: 'AI抠图', url: 'https://www.remove.bg/zh' },
				{ icon: 'fa fa-file-picture-o', label: 'Photopea', tag: '在线PS', url: 'https://www.photopea.com/' },
				{ icon: 'fa fa-file-picture-o', label: 'Color Hunt', tag: '配色', url: 'https://colorhunt.co/' },
				{ icon: 'fa fa-file-picture-o', label: '中国色', tag: '配色', url: 'http://zhongguose.com/' },
				{ icon: 'fa fa-file-picture-o', label: 'LOL Colors', tag: '配色', url: 'https://www.webdesignrankings.com/resources/lolcolors/' },
				{ icon: 'fa fa-file-picture-o', label: 'UI Design Daily', tag: '配色', url: 'https://www.uidesigndaily.com/' },
				{ icon: 'fa fa-file-picture-o', label: 'Adobe Color', tag: '调色', url: 'https://color.adobe.com/zh/create/color-wheel' },
				{ icon: 'fa fa-file-picture-o', label: 'Gradient by ShapeFactory', tag: '渐变色', url: 'https://gradient.shapefactory.co/' },
				{ icon: 'fa fa-file-picture-o', label: 'uiGradients', tag: '渐变色', url: 'https://uigradients.com/#Stripe' },
				{ icon: 'fa fa-file-picture-o', label: 'unDraw', tag: '矢量图', url: 'https://undraw.co/illustrations' },
				{ icon: 'fa fa-file-picture-o', label: 'Awesome Wallpapers', tag: '壁纸', url: 'https://wallhaven.cc/' },
				{ icon: 'fa fa-file-picture-o', label: 'BGJar', tag: 'SVG背景', url: 'https://bgjar.com/' },
				{ icon: 'fa fa-file-picture-o', label: 'Unsplash', tag: '免费图片', url: 'https://unsplash.com/' },
				{ icon: 'fa fa-file-picture-o', label: 'Pexels', tag: '免费图片', url: 'https://www.pexels.com/zh-cn/' },
				{ icon: 'fa fa-file-picture-o', label: 'Pixabay', tag: '免费图片', url: 'https://pixabay.com/' },
				{ icon: 'fa fa-file-picture-o', label: 'Photock', tag: '免费图片', url: 'https://www.photock.jp/' },
				{ icon: 'fa fa-file-picture-o', label: 'Pakutaso', tag: '免费图片', url: 'https://www.pakutaso.com/' },
				{ icon: 'fa fa-file-picture-o', label: 'ISO Republic', tag: '免费图片', url: 'https://isorepublic.com/' },
				{ icon: 'fa fa-file-picture-o', label: 'Kaboompics', tag: '免费图片', url: 'https://kaboompics.com/' },
				{ icon: 'fa fa-file-picture-o', label: 'NegativeSpace', tag: '免费图片', url: 'https://negativespace.co/' },
				{ icon: 'fa fa-file-picture-o', label: 'StockSnap', tag: '免费图片', url: 'https://stocksnap.io/' },
				{ icon: 'fa fa-file-picture-o', label: 'FancyCrave', tag: '免费图片', url: 'https://fancycrave.com/' },
				{ icon: 'fa fa-file-picture-o', label: 'Stockio', tag: '免费图片', url: 'https://www.stockio.com/' },
				{ icon: 'fa fa-file-picture-o', label: 'LibreShot', tag: '免费图片', url: 'https://libreshot.com/' },
				{ icon: 'fa fa-file-picture-o', label: 'Gratisography', tag: '免费图片', url: 'https://gratisography.com/' },
				{ icon: 'fa fa-file-picture-o', label: 'Skitterphoto', tag: '免费图片', url: 'https://skitterphoto.com/' },
				{ icon: 'fa fa-file-picture-o', label: 'picjumbo', tag: '免费图片', url: 'https://picjumbo.com/' },
				{ icon: 'fa fa-file-picture-o', label: 'Box Shadow', tag: 'CSS阴影', url: 'https://box-shadow.art/' },
				{ icon: 'fa fa-file-picture-o', label: 'Glass Morphism', tag: 'CSS玻璃', url: 'https://glassgenerator.netlify.app/' },
				{ icon: 'fa fa-list', label: 'All To All', tag: '格式转换', url: 'https://www.alltoall.net/' },
				{ icon: 'fa fa-list', label: '帮小忙', tag: '聚合工具', url: 'https://tool.browser.qq.com/' },
				{ icon: 'fa fa-list', label: '零代码-前端工具箱', tag: '聚合工具', url: 'https://lingdaima.com/' },
				{ icon: 'fa fa-list', label: 'Keyframes.app', tag: '聚合工具', url: 'https://keyframes.app/' },
				{ icon: 'fa fa-list', label: 'The-X', tag: '聚合工具', url: 'https://the-x.cn/' },
				{ icon: 'fa fa-list', label: '站长工具', tag: '聚合工具', url: 'https://tool.chinaz.com/' },
				{ icon: 'fa fa-list', label: '站长之家', tag: '聚合工具', url: 'http://www.webmasterhome.cn/' },
				{ icon: 'fa fa-list', label: '爱站网', tag: '聚合工具', url: 'https://www.aizhan.com/' },
				{ icon: 'fa fa-list', label: '脚本之家', tag: '聚合工具', url: 'http://tools.jb51.net/' },
				{ icon: 'fa fa-list', label: '在线工具', tag: '聚合工具', url: 'https://tool.lu/' },
				{ icon: 'fa fa-list', label: 'ME2在线工具', tag: '聚合工具', url: 'http://www.metools.info/' },
				{ icon: 'fa fa-list', label: 'aTool', tag: '聚合工具', url: 'https://www.atool99.com/' },
				{ icon: 'fa fa-list', label: '菜鸟工具', tag: '聚合工具', url: 'https://c.runoob.com/' },
				{ icon: 'fa fa-list', label: '即时工具', tag: '聚合工具', url: 'https://www.67tool.com/' },
				{ icon: 'fa fa-list', label: '思享工具箱', tag: '聚合工具', url: 'https://tool.4xseo.com/' },
				{ icon: 'fa fa-list', label: 'Devtools', tag: '聚合工具', url: 'https://smalldev.tools/' },
				{ icon: 'fa fa-list', label: 'BFW在线工具箱', tag: '聚合工具', url: 'https://tool.bfw.wiki/' },
				{ icon: 'fa fa-list', label: '独特工具箱', tag: '聚合工具', url: 'https://www.dute.org/' },
				{ icon: 'fa fa-list', label: 'Toolfk', tag: '聚合工具', url: 'https://www.toolfk.com/' },
				{ icon: 'fa fa-list', label: '众果搜', tag: '聚合工具', url: 'http://zhongguosou.com/' },
				{ icon: 'fa fa-list', label: 'Be JSON', tag: '聚合工具', url: 'https://www.bejson.com/' },
				{ icon: 'fa fa-list', label: '千千秀字', tag: '聚合工具', url: 'https://www.qqxiuzi.cn/daohang.htm' },
				{ icon: 'fa fa-list', label: 'CTF在线工具', tag: '聚合工具', url: 'http://www.hiencode.com/' },
				{ icon: 'fa fa-list', label: '青少年CTF', tag: '聚合工具', url: 'https://tools.qsnctf.com/' },
				{ icon: 'fa fa-list', label: 'Web-Based', tag: '聚合工具', url: 'https://rumkin.com/tools/' },
				{ icon: 'fa fa-list', label: 'AI-magic', tag: '聚合工具', url: 'https://www.msbd123.com/' },
			],
			websiteActiveIndex: -1,
			iframeUrl: '',
			loadingCount: 0
		}
	},
	methods: {
		itemClick(item, index) {
			if (this.websiteActiveIndex === index) return
			this.websiteActiveIndex = index
			this.loadingCount++
			this.iframeUrl = ''
			this.$nextTick(() => {
				this.iframeUrl = item.url
			})
		},
		openByBrowser() {
			if (!this.iframeUrl) return
			shell.openExternal(this.iframeUrl)
		},
	},
}
</script>

<style scoped lang="less">
@import "~@/assets/css/_mixins.less";
@import "~@/assets/css/_color.less";

.page-online-tools {
	display: flex;
	flex-direction: column;

	fieldset {
		height: 100%;

		.fieldset-content {
			height: calc(100% - 2em);
			overflow: auto;
		}
	}

	.page-body {
		height: 0;
		flex-grow: 1;

		&>.row {
			height: 100%;
		}

		.left {
			height: 100%;

			.website-list {
				height: 100%;
				padding: 0 1em;
				border-radius: .5em;
				color: #6c757d;
				background-color: @bgGrey;
				overflow: hidden auto;

				.website-item {
					padding: .5em 0;
					cursor: pointer;
					border-bottom: 1px dashed #bbb;

					&.active,
					&:hover {
						font-weight: 600;
						color: @colorWarning;
					}
				}
			}
		}

		.right {
			height: 100%;

			.fieldset-content {
				position: relative;
				border-radius: 0.5em;
			}

			iframe {
				display: block;
				width: 100%;
				height: 100%;
				border-radius: .5em;
				background-color: @bgGrey;
			}

			.iframe-btn {
				position: absolute;
				top: 5px;
				right: 5px;
				cursor: pointer;
			}
		}
	}
}</style>
